<template>
    <div>
      <!--表格组 -->
      <div class="table-ctrl-body">
        <h3 class="explain-h3" v-text="title[0]"></h3>
        <div class="">
          <!--表格头-->
          <!--{{treeTableRow}}-->
          <div class="table-header">
            <table class="table-default">
              <thead class="query-table">
              <tr>
                <th style="width: 50px;">序号</th>
                <th :style="theadStyleFn(ths.key)"
                    v-for="ths in tableHeader">
                  {{ths.value}}
                </th>
              </tr>
              </thead>
            </table>
          </div>
          <!--表格中部-->
          <div class="table-overflowX query-table-body">
            <table class="table-default">
              <tbody>
              <tr class="query-tbody-tr"
                  v-for="(trs,index) in tableRow"
              >
                <td class="query-tbody-td" style="width: 50px;">{{index+1}}</td>
                <td class="query-tbody-td"
                    :style="theadStyleFn(tds.key)"
                    v-for="tds in tableHeader"
                    :title="trs[tds.key]">
                  {{ trs[tds.key] }}
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <h3 class="explain-h3" v-text="title[1]"></h3>
        <div class="">
          <!--表格头-->
          <!--{{treeTableRow}}-->
          <div class="table-header">
            <table class="table-default">
              <thead class="query-table">
              <tr>
                <th style="width: 50px;">序号</th>
                <th :style="theadStyleFn(ths.key)"
                    v-for="ths in tableHeader">
                  {{ths.value}}
                </th>
              </tr>
              </thead>
            </table>
          </div>
          <!--表格中部-->
          <div class="table-overflowX query-table-body">
            <table class="table-default">
              <tbody>
              <tr class="query-tbody-tr"
                  v-for="(trs,index) in tableRow2"
              >
                <td class="query-tbody-td" style="width: 50px;">{{index+1}}</td>
                <td class="query-tbody-td"
                    :style="theadStyleFn(tds.key)"
                    v-for="tds in tableHeader"
                    :title="trs[tds.key]">
                  {{ trs[tds.key] }}
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <!--表格组end -->
    </div>
</template>

<script>
  export default {
    name: "explain",
    data () {
      return {
        title: [
          "岗位名词",
          "区域名词",
        ],
        tableRow: [],  // 表格数据
        tableRow2: [],  // 表格数据
        tableHeader: [
          {"key": "name", "value": "名称"},
          {"key": "explain", "value": "解释"},
        ]
      }
    },
    mounted(){
      this.init ();
    },
    methods:{
      init () {
        this.getTableRow ();
      },
      getTableRow () {
        this.tableRow = [
          {"name": "勤务岗", "explain": "我就是勤务岗"},
          {"name": "巡逻岗位", "explain": "我就是巡逻岗位"},
          {"name": "备勤岗", "explain": "我就是备勤岗"},
        ];
        this.tableRow2 = [
          {"name": "封控圈", "explain": "我就是封控圈"},
          {"name": "防空圈", "explain": "我就是防空圈"},
        ];
      },
      theadStyleFn (key) {
        switch (key) {
          case 'name':
            return 'width:15%'
          // case 'explain':
          //   return 'width:80%'
        }
      }

    }, // method end
  }
</script>

<style scoped>

</style>
